<template>
    <div class="birthList">
        <div class="list">
            <birth v-for="(item, key) in dataList" :key="key" :items="item" :shan='getbirth'></birth>
        </div>
        <div class="creation">
            <span></span>
            <button class="f32" @click="chuangjian()">新建八字</button>
            <p class="f24">以上信息我们会绝对保密，请你放心填写</p>
        </div>
        <div class="birth_mark" v-if="isMark">
            <div class="birth_mark_msg">
                <p>确定删除吗？</p>
                <div class="birth_mark_msg_btn">
                    <span @click="isShowa(false)">取消</span>
                    <span @click="bazidelete()">确定</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Bus from '../../bus/bus.js'
    import birth from '@/components/birth'
    export default {
        name: 'birthList',
        components: {
            birth
        },
        data() {
            return {
                dataList: [],
                isMark: false,
                orderId: '',
            }
        },
        methods: {
            getbirth() {
                let params = {
                    userId: this.$store.state.userId
                }
                this.$http.fetchGet('checkBazilist', params).then((res) => {
                    if(res.code == 200) {
                        this.dataList = res.data
                    } else {
                        this.$vux.toast.text(res.msg)
                    }
                }, (err) => {
                    console.log(err)
                })
            },
            chuangjian() {
                this.$router.push({//你需要接受路由的参数再跳转
                    path: '/horoscope',
                    query: {
                        id: '0'
                    }
                })
            },
            bazidelete() {
                let params = {
                    id: this.orderId,
                    userId: this.$store.state.userId,
                }
                this.$http.fetchGet('bazidelete', params).then((res) => {
                    if(res.code == 200) {
                        this.$vux.toast.text('删除成功')
                        this.isMark = false
                        this.getbirth()
                    } else {
                        this.$vux.toast.text('删除失败')
                    }
                }, (err) => {
                    console.log(err)
                })
            },
            isShowa(bool) {
                this.isMark = bool
            }
        },
        mounted() {
            this.getbirth()
            Bus.$on('shanchu', (val) => {
                this.isMark = val.isShow;
                this.orderId = val.baId
            })
        }
    }
</script>

<style lang="less" scoped>
    .birthList{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #f2f2f2;
        box-sizing: border-box;
        .list{
            overflow-y: scroll;
            .pb(185);
            background: #f2f2f2;
        }
        .creation{
            position: fixed;
            bottom: 0px;
            width: 100%;
            box-sizing: border-box;
            text-align: center;
            .padd(0, 20);
            z-index: 9;
            background: #fff;
            .pt(20);
            .pb(20);
            button{
                .mb(30);
                width: 100%;
                .h(88);
                color: #fff;
                border: 0;
                border-radius: 10px;
                background: #189BEB;
            }
            p{
                color: #666;
            }
        }
        .birth_mark{
            position: fixed;
            top: 0;
            bottom: 0;
            width: 100%;
            background: rgba(0,0,0,.5);
            z-index: 99;
            .birth_mark_msg{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border-radius: 5px;
                .w(500);
                .h(300);
                background: #fff;
                p{
                    .lh(200);
                    text-align: center;
                }
                .birth_mark_msg_btn{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    display: flex;
                    border-top: 1px solid #f2f2f2;
                    span{
                        flex: 1;
                        text-align: center;
                        .lh(88);
                        &:last-child{
                            border-left: 1px solid #f2f2f2;
                            color: #189BEB;
                        }
                    }
                }
            }
        }
    }
</style>
